<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title></title>
		<style type="text/css">
			.container{
				display: flex;
				margin-bottom: 30px;
				background: #009A61;
				flex-wrap: wrap;/*一行排不下就要换行，否则默认是item宽度变小，强行排在一行*/
			}
			.item{
				width: 300px;
				margin: 10px;
				background:#00FFFF;
			}
			.container1{
				justify-content: space-around;
				align-items: center;
			}
			.container2{
				
			}
			.item2{
				flex:1;
			}
		</style>
	</head>
	<body>
		<div class="container">
			<div class="item">
				item
			</div>
			<div class="item">
				item
			</div>
			<div class="item">
				item
			</div>
			<div class="item">
				item
			</div>
			<div class="item">
				item
			</div>
			<div class="item">
				item
			</div>
			<div class="item">
				item
			</div>
			<div class="item">
				item
			</div>
			<div class="item">
				item
			</div>
		</div>
		
		<div class="container container1">
			<div class="item item1">
				item
				<br />
				item
			</div>
			<div class="item item1">
				item
			</div>
			<div class="item item1">
				item
				<br />
				item
				<br />
				item
			</div>
		</div>
		
		<div class="container">
			<div class="item item2">
				item<br /> item
			</div>
			<div class="item item2" style="flex: 3;align-self:flex-start;">
				item
			</div>
			<div class="item item2">
				item
			</div>
			<div class="item item2">
				item
			</div>
			<div class="item item2">
				item
			</div>
			<div class="item item2">
				item
			</div>
			<div class="item item2">
				item
			</div>
			<div class="item item2">
				item
			</div>
			<div class="item item2">
				item
			</div>
		</div>
	</body>
</html>